<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id = "message">
        //这里展示支付状态信息
    </div>
    <script>
        if (window.EventSource) { //判断浏览器是否支持SSE
            //第2步，主动进行建立长连接，表明用户已经发起支付
            let source = new EventSource(
                'https://localhost:8888/orderpay?payid=1');
            let innerHTML = '';

            //监听服务器端发来的事件：open
            source.onopen = function(e) {
                innerHTML += "onopen：准备就绪，可以开始接收服务器数据" + "<br/>"; //支付结果
                document.getElementById("message").innerHTML = innerHTML;
            };
            //监听服务器端发来的事件：message
            source.onmessage = function(e) {
                innerHTML += "onmessage:" + e.data + "<br/>"; //支付结果
                document.getElementById("message").innerHTML = innerHTML;
            };

            //监听服务器端发来的事件：error
            source.onerror = function(e) {
                if (e.readyState === EventSource.CLOSED) {
                    innerHTML += "sse连接已关闭" +  "<br/>";
                } else {
                    console.log(e);
                }
            };

            //自定义finish事件，主动关闭EventSource
            source.addEventListener('finish', function(e) {
                source.close();
                innerHTML += "支付结果接收完毕，通知服务端关闭EventSource" +  "<br/>";
                document.getElementById("message").innerHTML = innerHTML;
            }, false);
        } else {
            console.log("你的浏览器不支持SSE");
        }
    </script>
</body>
</html>